<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="/home/css/my.css">
	<title>Document</title>
</head>

<body>
	{{-- 顶部导航部分 --}}
	<header>
		<div class="header_wrap">
			<p>商务英语、国际贸易系列教学软件，涵盖了教学资源、教学课程、考试和专业实习。 产品贯穿教学的整个过程，能够辅助老师教学，训练与考察学生的各个技能点，对提高学生的实践能力起到促进作用，帮助学生更快更好地适应工作岗位。</p>
			<div class="logo">
				<a href="/" style="display:block;width:45px;height:45px;"></a>
			</div>
			<div class="box3" onclick="admin_add('添加留言','/home/leave/add','800','500')">
				添加留言
			</div>
		</div>
	</header>
	{{-- 展示部分 --}}
	<div class="box">
		@foreach($data as $value) @if ($loop->iteration
		< 3) <div class="box1">
			<div class="card">
				<h2>{{$value->member->username}}の留言</h2>
				<img src="/home/images/user1.jpg" alt="">
				<div class="feed" id="feed{{$value->id}}">
					<div>
						<p class="comment">{{$value->comment}}</p>
					</div>
					<div class="heart " id="like{{$value->id}}" rel="like" userid="{{$value->id}}"></div>
					<div class="likeCount" id="likeCount{{$value->id}}">{{$value->tump_up}}</div>
				</div>
			</div>
	</div>
	@else
	<div class="box1">
		<div class="card">
			<h2>{{$value->member->username}}の留言</h2>
			<img src="{{$value->member->avatar}}" alt="">
			<div class="feed" id="feed{{$value->id}}">
				<div>
					<p class="comment">{{$value->comment}}</p>
				</div>
				<div class="heart " id="like{{$value->id}}" rel="like" userid="{{$value->id}}"></div>
				<div class="likeCount" id="likeCount{{$value->id}}">{{$value->tump_up}}</div>
			</div>
		</div>
	</div>
	@endif @endforeach
	</div>
</body>
<script src="/home/js/jquery.min.js"></script>
<script src="/home/js/jQuery-face-cursor.js"></script>
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
<script>
	function admin_add(title, url, w, h) {
       		 layer_show(title, url, w, h);
    	}
		$('.comment').each(function (index,dom) {
			$(this).html($(this).text());
		})

</script>
<script>
	$(function() {
        $(".card").faceCursor({
            avertCursor: false,
            perspective: "8rem",
            cacheElementData: true
        });
        // 点赞特效

        $('body').on("click", '.heart', function() {
            var id = $(this).attr('userid');
            var A = $(this).attr("id");
            var B = A.split("like");
            var messageID = B[1];
            var C = parseInt($("#likeCount" + messageID).html());
            $(this).css("background-position", "")
            var D = $(this).attr("rel");
            var element = $(this);
             $.ajax({
                type: 'get',
                 url: '/home/leave/tump',
                data: {
                    'id': id,
                    'd': D
                },
                dataType: 'json',
                cache: false,
                success: function(data) {
                $("#likeCount"+messageID).html(data.count);
                   if (D === 'like' && data.info === '1') {
                      $(element).addClass("heartAnimation").attr("rel", "unlike");
                   } else if (D === 'unlike' && data.info === '1') {
                      $(element).removeClass("heartAnimation").attr("rel", "like");
                      $(element).css("background-position", "left");
                    }
                },
               error: function(data) {
                    console.log(data.message);
                }
            });

        });

    });
</script>

</html>